﻿@namespace AntSK.Pages.ChatPage
@using AntSK.Domain.Repositories
@using AntSK.Models
@using Microsoft.AspNetCore.Components.Web.Virtualization
@page "/Chat"
@page "/Chat/{AppId}"
@using AntSK.Services.Auth
@inherits AuthComponentBase

<GridRow Gutter="(16, 16)">
    <GridCol Span="12">
        <Spin Size="large" Tip="请稍等..." Spinning="@(_loading)">
            <Card Style="height:700px;overflow: auto;">
                <TitleTemplate>
                    <Icon Type="setting" /> 选择应用
                    <Select DataSource="@_list"
                            @bind-Value="@AppId"
                            DefaultValue="@("lucy")"
                            ValueProperty="c=>c.Id"
                            LabelProperty="c=>c.Name"
                            Style="width:200px">
                    </Select>
                </TitleTemplate>
                <Body>
                    <div id="scrollDiv" style="height: 530px; overflow-y: auto; overflow-x: hidden;">
                        <GridRow Gutter="(8, 8)" Style="margin:0">
                            <Virtualize Items="@(MessageList.OrderBy(o => o.CreateTime).ToList())" Context="item">
                                @if (item.IsSend)
                                {
                                    <GridRow Style="width:100%">
                                        <GridCol Span="23">
                                            <div class="chat-bubble sent">
                                                <Popover Title="@item.CreateTime.ToString()">
                                                    @(item.Context)
                                                </Popover>
                                            </div>
                                            <Icon Style="float:right;margin-top:10px;" Type="copy" Theme="outline" OnClick="async () =>await OnCopyAsync(item)" />
                                        </GridCol>
                                        <GridCol Span="1">
                                            <Image Width="25px" Height="25px" Style="margin-top:10px;margin-right:10px;" Src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
                                        </GridCol>
                                    </GridRow>
                                }
                                else
                                {
                                    <GridRow Style="width:100%">
                                        <GridCol Span="1">
                                            <Image Width="25px" Height="25px" Style="margin-top:10px;" Src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg" />
                                        </GridCol>
                                        <GridCol Span="23">
                                            <div class="chat-bubble received">
                                                @((MarkupString)(item.HtmlAnswers))
                                            </div>
                                        </GridCol>
                                    </GridRow>
                                }
                            </Virtualize>
                        </GridRow>
                    </div>
                    <div style="height: 10px;"></div>
                    <AntDesign.Input @bind-Value="@(_messageInput)" DebounceMilliseconds="@(-1)" Placeholder="输入消息回车发送" OnPressEnter="@(async () => await OnSendAsync())" Disabled="@Sendding">
                        <Suffix>
                            <Button Icon="clear" Type="@(ButtonType.Link)" OnClick="@(async () => await OnClearAsync())" Disabled="@Sendding"></Button>
                            <Button Icon="send" Type="@(ButtonType.Link)" OnClick="@(async () => await OnSendAsync())" Disabled="@Sendding"></Button>
                        </Suffix>
                    </AntDesign.Input>
                </Body>
            </Card>
        </Spin>
    </GridCol>
    <GridCol Span="12">
        <Card Style="height: 700px;overflow: auto;">
            <TitleTemplate>
                <Icon Type="search" /> 调试结果
            </TitleTemplate>
            <Extra>

            </Extra>
            <Body>
                <AntList Bordered DataSource="@_relevantSources" Style="padding:10px;">
                     <ChildContent Context="item">
                         <span> <b>@item.SourceName </b>  相似度：<Text Mark> @item.Relevance</Text></span>
                            <Body>
                                @((MarkupString)(@item.Text))
                            </Body>
                        </ChildContent>
                    </AntList>
                </Body>
            </Card>
        </GridCol>
    </GridRow>

    <style>

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 10px;
            justify-content: center;
            align-items: flex-start;
            height: 100vh;
        }

        .chat-container {
            width: 350px;
            border: 1px solid #ccc;
            border-radius: 5px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            background-color: #fff;
            padding-bottom: 15px;
        }

        .chat-bubble {
            padding: 10px;
            margin: 10px;
            margin-bottom: 0;
            border-radius: 5px;
            max-width: 70%;
            position: relative;
        }

        .received {
            background-color: #f0f0f0;
            align-self: flex-start;
            float: left;
        }

        .sent {
            background-color: #daf8cb;
            align-self: flex-end;
            float: right;
            position: relative;
        }
    </style>
    @code {

}
